<template>
    <div style="border: 1px solid #000;padding:16px 0;text-align: left;">
        <!-- 左侧输入框 -->
        <div class="search-left">
            <!-- text -->
            <div class="search-item" v-if="textType.size > 0">
                <emap-form-text
                    v-model="formValue[item.name]"
                    v-bind="props.model.controls[0]"
                    @myChange="onSearch"
                />
            </div>
            <!-- other -->
            <div class="search-item" v-for="item in OtherType" :key="item.name">
                <component :is="formItemListKey[item.xtype]" 
                    v-model="formValue[item.name]"
                    v-bind="item"
                    @myChange="onSearch"
                />
            </div>
            <!-- 日期 -->
        </div>
        <!-- 右侧按钮 -->
        <div class="search-right">
            按钮
        </div>
    </div>
</template>

<script setup>
    import { defineProps, defineExpose, ref, reactive, onMounted, watch} from "vue";
    import {formItemListKey} from "../emapForm/emap-form-item/emap-form-item.js";
    const props = defineProps({
        model: {
            type: Object,
            require: true
        },
        resetButton: {
            type: Boolean,
            default: false
        }
    });
    const emit = defineEmits(['initComplete','search']);
    
    // 文本输入类型
    let textType = {
        name: [],
        xtype: 'text',
        placeholder: '请输入',
        size: 0,
        value: '',
        ref: ref('textType')
    };
    // 其他类型
    let OtherType = [];
    //筛选快速搜索字段
    props.model.controls.forEach(function (item, index) {
        if(item.quickSearch){
            readFields(item);
        }
    });
    function readFields(item){
        item.xtype = item['search.xtype'] ? item['search.xtype'] : item['xtype'];
        switch(item.xtype){
            //case 'text': buidTextType(item); break;
            default: buildOtherType(item); break;
        }
    };
    //1.test
    function buidTextType(item){
        textType.name.push(item.name);
        if(textType.size == 0){
            textType.placeholder += item.caption;
        }else{
            textType.placeholder += ('/'+item.caption);
        }
        textType.size++;
    };
    //2.other
    function buildOtherType(item){
        item.ref = ref(item.name);
        OtherType.push(item);
    };

    // 表单值
    var formValue = reactive({});

    /**
     * 触发搜索事件
     * @param {*} value 
     */
    function onSearch(value){
        console.log('onSearch', value);
    }

    onMounted(()=>{
        console.log('ref1', textType.ref);
        //textInput.value.value = '111111111';
        console.log('ref2', OtherType[0].ref);
    });
    
    defineExpose({
        
    });
</script>

<style scoped>
    .search-left{
        display: inline-block;
        width: 80%;
    }
    .search-right{
        display: inline-block;
        width: 20%;
        min-width: 100px;
        float: right;
    }
    .search-item{
        display: inline-block;
        min-width: 350px;
    }
</style>